<template>
    <div class="tab-content">
        <!-- 24小时瞬时功率数据配置 -->
        <div class="instantaneous-power-section">
            <div class="section-header">
                <h3>24小时瞬时功率数据配置</h3>
                <div class="header-actions">
                    <el-button type="primary" size="small" @click="fillRandomInstantaneousPowerData">随机填充</el-button>
                    <el-button type="warning" size="small" @click="clearInstantaneousPowerData">清空数据</el-button>
                    <el-button type="success" size="small" @click="saveInstantaneousPowerData">保存配置</el-button>
                </div>
            </div>
            
            <div class="data-form-container">
                <el-form :model="instantaneousPowerForm" label-width="0">
                    <div class="hour-grid">
                        <div v-for="(item, index) in instantaneousPowerForm.data" :key="index" class="hour-item">
                            <div class="hour-card">
                                <div class="hour-header">
                                    <span class="time-label">{{ item.time }}</span>
                                    <el-button size="small" type="text" @click="resetHourValue(item)" class="reset-btn">重置</el-button>
                                </div>
                                <div class="hour-input">
                                    <el-input-number 
                                        v-model="item.value" 
                                        :min="0" 
                                        :max="2000" 
                                        :step="10"
                                        size="small"
                                        class="value-input"
                                        controls-position="right"
                                    />
                                    <span class="unit-label">kW</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, defineProps, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDataClassifyDetail, updateDataClassify } from '@/api/port'







// ========================================================================================
// 模块1: 24小时瞬时功率数据配置
// ========================================================================================

// 24小时瞬时功率数据表单
const instantaneousPowerForm = reactive({
    data: Array.from({ length: 24 }, (_, i) => ({
        hour: i, // X轴数据：0-23小时
        time: `${i.toString().padStart(2, '0')}:00`, // 时间显示格式
        value: Math.floor(Math.random() * 1000) + 100 // Y轴数据：随机值100-1100
    }))
})

// 保存24小时瞬时功率数据
const saveInstantaneousPowerData = async () => {
    try {
        await updateDataClassify({
            id: 2,
            key: 'module1',
            value: instantaneousPowerForm.data
        })
        console.log('保存24小时瞬时功率数据配置:', toRaw(instantaneousPowerForm))
        ElMessage.success('24小时瞬时功率数据配置保存成功')
    } catch (error) {
        ElMessage.error('保存失败，请重试')
    }
}

// 随机填充24小时瞬时功率数据
const fillRandomInstantaneousPowerData = () => {
    instantaneousPowerForm.data.forEach(item => {
        item.value = Math.floor(Math.random() * 1000) + 100
    })
    ElMessage.success('随机数据填充完成！')
}

// 清空24小时瞬时功率数据
const clearInstantaneousPowerData = () => {
    instantaneousPowerForm.data.forEach(item => {
        item.value = 0
    })
    ElMessage.success('数据已清空！')
}

// 重置单个小时的数值
const resetHourValue = (item: any) => {
    item.value = 0
    ElMessage.success(`${item.time}数据已重置！`)
}
onMounted(() => {

   

})

const init = async (moduleData: any) => {
    instantaneousPowerForm.data = moduleData.map((item: any) => ({
        ...item,
        hour: Number(item.hour),
        value: Number(item.value)
    }))

}

defineExpose({
    init
})

</script>
<style lang="less" scoped>

</style>